<template>
  <span v-html="highlightedText"></span>
</template>

<script>
export default {
  name: 'HighlightText',
  props: {
    text: {
      type: String,
      required: true
    },
    keyword: {
      type: String,
      default: ''
    }
  },
  computed: {
    highlightedText() {
      if (!this.keyword) {
        return this.text;
      }
      
      const regex = new RegExp(`(${this.escapeRegExp(this.keyword)})`, 'gi');
      return this.text.replace(regex, '<span class="highlight">$1</span>');
    }
  },
  methods: {
    escapeRegExp(string) {
      return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
    }
  }
}
</script>

<style scoped>
:deep(.highlight) {
  background-color: var(--highlight-bg);
  color: var(--highlight-color);
  padding: 0 2px;
  border-radius: 2px;
}
</style> 